<template>
  <div class="container">
     <!--  <div :class="[flag ? 'message' : 'message1']" class="signup">
    <div :class="[flag ? 'btn-wrapper' : 'btn-wrapper1']">
        <button class="button" id="signup" @click="signup" >注册</button>
        <button class="button" id="login" @click="login" >登录</button>
      </div>
    </div> -->
    <div class="form form--signup">
      <!-- <div class="form--heading">注册</div>
       <el-form
        @submit.prevent
      label-width="120px"
      class="RegisterForm sign-in-from"
      ref="ruleFormRef1"
      :model="registerUser"
      :rules="rules1"> 
    <el-form-item class="elstyle" prop="Raccount">
      <el-input class="inputs" type="text" placeholder="account" v-model="registerUser.Raccount"/>
    </el-form-item>
    <el-form-item class="elstyle" prop="Rpassword">
      <el-input class="inputs" type="password" placeholder="password" v-model="registerUser.Rpassword"/>
    </el-form-item>
      <el-form-item class="elstyle" prop="Rname">
      <el-input class="inputs" type="text" placeholder="name" v-model="registerUser.Rname"/>
    </el-form-item>
    <el-form-item class="elstyle" prop="Rphone">
      <el-input class="inputs" placeholder="phone" v-model="registerUser.Rphone"/>
    </el-form-item>
        <button class="button" @click="submit_btn1(ruleFormRef1)">注册</button>
      </el-form> -->
      <img src="../../assets/images/logo.png" style="width:350px" alt="">
    </div>
    <div class="form form--login">
      <div class="form--heading">登录</div>
      <el-form
       @submit.prevent
      label-width="120px"
      class="loginForm sign-in-from"
      ref="ruleFormRef"
      :model="loginUser"
      :rules="rules"
    >
    <el-form-item class="elstyle" prop="account">
      <el-input class="inputs" type="text" placeholder="account" v-model="loginUser.account"/>
    </el-form-item>
    <el-form-item class="elstyle" prop="password">
      <el-input class="inputs" type="password" placeholder="password" v-model="loginUser.password"/>
    </el-form-item>
        <button class="button"  @click="submit_btn(ruleFormRef)">登录</button>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, ref, toRefs } from "vue";
import { FormInstance, ElMessage } from "element-plus";
import { postLoginAPI,postRegisterAPI } from "../../api/userinfo";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup() {
    let flag = ref(true);
    const signup = () => {
      flag.value = false;
      loginUser.account="";
      loginUser.password="";
    };
    const login = () => {
      flag.value = true;
      registerUser.Raccount="";
      registerUser.Rpassword="";
      registerUser.Rname="";
      registerUser.Rphone="";
    };
    const router = useRouter(); //路由
    const store = useStore(); //vuex仓库
    const signUpMode = ref(false);
    const ruleFormRef = ref<FormInstance>();
    const ruleFormRef1 = ref<FormInstance>();
    /**登录对象 */
    const loginUser = reactive({
      account: "",
      password: "",
    });
    /**注册对象 */
    const registerUser = reactive({
      Raccount: "",
      Rpassword: "",
      Rname: "",
      Rphone: "",
    });
    /**登录校验规则 */
    const rules = reactive({
      account: [
        { required: true, message: "账号不能为空", trigger: "blur" },
        {
          min: 5,
          max: 12,
          message: "账号长度应在5-12之间",
          trigger: "blur",
        },
      ],
      password: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 6, max: 12, message: "密码长度应在6-12之间", trigger: "blur" },
      ],
    });
/**注册校验规则 */
    const rules1 = reactive({
      Raccount: [
        { required: true, message: "账号不能为空", trigger: "blur" },
        {
          min: 5,
          max: 12,
          message: "账号长度应在5-12之间",
          trigger: "blur",
        },
      ],
      Rpassword: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 6, max: 12, message: "密码长度应在6-12之间", trigger: "blur" },
      ],
      Rname: [
        { required: true, message: "用户名不能为空", trigger: "blur" },
        { min: 2, max: 7, message: "用户名长度应该在2-7之间",trigger: "blur"},
      ],
      Rphone :[{ required: true, message: "电话号码不能为空" ,trigger: "blur" },
        { min: 11, max: 11, message: "电话号码长度不正确",trigger: "blur"},
      ],
    });
    /**登录提交 */
    const submit_btn = async (formE1: FormInstance | undefined) => {
      if (!formE1) return;
      await formE1.validate((valid, fields) => {
        if (valid) {
          store.dispatch("SET_LOGIN",loginUser).then((res)=>{
           if(res.code!=500){
             if(store.state.user.role==3)throw '您无权限访问';
             sessionStorage.setItem("token",store.state.user.token)
             store.dispatch("SET_ROLE",{id:store.state.user.role}).then(()=>{
              console.log(store.state.user.roleTag);
             if(store.state.user.roleTag=='admin'){
                router.push("/home/ac")
             }
             else{
                router.push("/home/movie")
             }
             }) 
             ElMessage({message:"登录成功",type:"success"});
           }
           else{
              ElMessage({message:"账号或者密码错误",type:"error"});
           }
          })
        } else {
           ElMessage.error("错误提交")
        }
      });
    };
    /**注册提交 */
     const submit_btn1 = async (formE1: FormInstance | undefined) => {
      if (!formE1) return;
      await formE1.validate((valid, fields) => {
        if (valid) {
            postRegisterAPI({
                account:registerUser.Raccount,
                password:registerUser.Rpassword,
                name:registerUser.Rname,
                userphone:registerUser.Rphone,
            })
           .then((res) => {
               console.log(res)
            ElMessage({message:"注册成功",type:"success"});
          //保存用户信息和token
          // store.commit("SET_TOKEN", res.data.token);
          // store.commit("SET_USERINFO", res.data.userInfo);
         router.push({ name: "Home" });  
        }).catch((err:any) => {
          console.log(err)
          ElMessage("注册失败");
        });
        
        } else {
          ElMessage("请检查各项数据是否正确")
        }
      });
    };
    return {
      signup,
      login,
      flag,
      signUpMode,
      loginUser,
      registerUser,
      ruleFormRef,
      ruleFormRef1,
      rules,
      rules1,
      submit_btn,
      submit_btn1,
    };
  },
};
</script>
<style scoped>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display");
body,
.message,
.form,
form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
body {
  height: 100vh;
  font-family: "Source Sans Pro", sans-serif;
  overflow: hidden;

}
.container {
  margin: 10% auto;
  width: 700px;
  height: 400px;
  background: white;
  position: relative;
  display: grid;
  grid-template: 100% / 50% 50%;
  box-shadow: 2px 20px 30px 0 rgba(51, 51, 51, 0.2);

}
.message {
  position: absolute;
  background: white;
  width: 50%;
  height: 100%;
  transform: translateX(0);
  transition: 0.5s all ease;
  z-index: 4;
}
.message1 {
  position: absolute;
  background: white;
  width: 50%;
  height: 100%;
  transform: translateX(100%);
  transition: 0.5s all ease;
  z-index: 4;
}
.message:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 70%;
  background: #c3c3d8;
  opacity: 0;
  left: 0;
  top: 15%;
}
.message1:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 70%;
  background: #c3c3d8;
  opacity: 0;
  left: 100%;
  top: 15%;
}
.signup:before {
  opacity: 0.3;
  left: 0;
}
.login:before {
  opacity: 0.3;
  left: 100%;
}
.btn-wrapper {
  width: 60%;
}
.btn-wrapper1 {
  width: 60%;
  margin: 160px auto;
}
.form {
  width: 100%;
  height: 100%;
}
.form--heading {
  font-size: 18px;
  height: 50px;
  color: #809bce;
  font-family: "Playfair Display", serif;
}
form {
  width: 70%;
}
form > * {
  margin: 10px;
}
form input {
  width: 90%;
  border: 0;
  border-bottom: 1px solid rgba(195, 195, 216, 0.5);
  font-size: 13px;
  font-weight: 300;
  color: #797a9e;
  letter-spacing: 0.11em;
}
form input::placeholder {
  color: #c3c3d8;
  font-size: 10px;
}
form input:focus {
  outline: 0;
  border-bottom: 1px solid rgba(128, 155, 206, 0.7);
  transition: 0.6s all ease;
}
.button {
  width: 100%;
  height: 30px;
  border: 0;
  outline: 0;
  color: white;
  font-size: 15px;
  font-weight: 300;
  position: relative;
  z-index: 3;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #809bce, #9893da);
  font-family: "Playfair Display", serif;
}
.button:hover {
  transform: translateY(4px);
  transition: 0.4s all ease;
}
.display{
  display: var(--aa)
}
@media (max-width: 750px) {
  .container {
    transform: scale(0.8);
  }
}

.elstyle{
  margin-left: -110px;
}
.elstyle input{
  width: 220px;
}

</style>
